import React, { Component } from "react";
import { Redirect } from "react-router-dom";

import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

import "./login.less";
import logo from "../../assets/images/react.png";

import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";

class Login extends Component {
  state = {};

  validatePwd = (rule, value, callback) => {
    if (value && /^[a-zA-Z0-9_]+$/.test(value)) {
      callback();
    } else {
      callback("密码必须是字母数字下划线");
    }
  };

  onFinish = (values) => {
    console.log("登录form参数: ", values);
    //登录成功，跳转到管理界面(不需要回退到登录界面)
    message.success("登录成功!");
    const user = {
      id: "5fd06735fa244c0b10cadec7",
      username: "admin",
      password: "202cb962ac59075b964b07152d234b70",
      phone: "123242434",
      email: "sd",
      roleId: "5e188bb874c89321209fedda",
      createTime: 1555061512734,
      // 用于左侧判断菜单权限
      role:{
        "_id": '5e175a134bce5e36d48fb4db',
        "menus": [
          "all",
          "/home",
          "/products",
          "/category",
          "/product",
          "/user",
          "/role",
          "/charts",
          "/charts/bar",
          "/charts/line",
          "/charts/pie"
        ],
        "name": "管理员",
        "create_time": 1578588691768,
        "auth_name": "admin",
        "auth_time": 1578588698490
      }
    };
    memoryUtils.user = user; //保存在内存中
    storageUtils.saveUser(user); //保存在本地
    this.props.history.replace("/");
  };

  render() {
    //若用户已经登录，则自动跳转到管理界面
    const user = memoryUtils.user;
    if (user && user.id) {
      return <Redirect to="/" />;
    }
    return (
      <div className="login">
        <header className="login-header">
          <img src={logo} alt="react" />
          <h1>REACT后台管理系统</h1>
        </header>
        <section className="login-content">
          <h2>用户登录</h2>
          <Form
            className="login-form"
            initialValues={{ remember: true }}
            // 登录事件
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: "用户名不能为空" },
                { min: 4, message: "用户名至少4位" },
                { max: 6, message: "用户名最多6位" },
                { pattern: /^[a-zA-Z0-9_]+$/, message: "必须是英文数字下划线" },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "密码不能为空" },
                { validator: this.validatePwd },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
                block
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    );
  }
}


export default Login;
